<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>命令模式</title>
</head>
<body>
    <button id="button1">点击按钮1</button>
    <button id="button2">点击按钮2</button>
    <button id="button3">点击按钮3</button>
    <script>
        var btn1 = document.getElementById("button1");
        var btn2 = document.getElementById("button2");
        var btn3 = document.getElementById("button3");

        var setCommand = function(button,command){
            console.log(button);

            button.click = function(){
                command.execute();
            }
        }

        var menubar = {
            refresh:function(){
                alert("刷新菜单数据");
            }
        };

        var submenu = {
            add:function(){
                alert("增加子菜单");
            },
            del:function(){
                alert("删除子菜单");
            }
        }

        var refreshMenuBarCommond = function(receiver){
            this.receiver = receiver;
        }

        refreshMenuBarCommond.prototype.execute = function(){
            this.receiver.refresh();
        }
        var addSubMenuCommond = function(receiver){
            this.receiver = receiver;
        }
        addSubMenuCommond.prototype.execute = function(){
            this.receiver.add();
        }
        var delSubMenuCommond = function(receiver){
            this.receiver = receiver;
        }
        delSubMenuCommond.prototype.execute = function(){
            alert("删除子菜单");
        }

        var refreshMenuBarCommand = new refreshMenuBarCommond(menubar);
        var addSubMenuCommand = new addSubMenuCommond(submenu);
        var delSubMenuCommand = new delSubMenuCommond(submenu);

        setCommand(btn1,refreshMenuBarCommand);
        setCommand(btn2,addSubMenuCommond);
        setCommand(btn3,delSubMenuCommond);

    </script>
</body>
</html>